<template>
  <div class="home" ref="kkk">
   
  </div>
</template>

<script>
// @ is an alias to /src
const echarts = require("echarts")
export default {
  data() {
    return {
      charts: null
    }
  },

  computed:{
    
  },

  methods: {
   chartsFun() {
     const chart = echarts.init(this.$refs.kkk)
      var option = {
            title: {
                text: '学习echarts'
            },
            grid: {
              bottom: "20%"
              // echarts图形的大小的控制
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
              // 鼠标放上你去显示的内容控制
            },

            legend: {
                data:['销量']
                // 顶部标签的控制
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫qqqqqqqqqqq","裤子","高跟鞋","袜子"],
                axisLine: {
                  show: true
                },
                // x轴线的显示
                axisTick: {
                  show: false
                  // 刻度是否显示
                },
                axisLabel: {
                  color: "red",
                  fontSize: 15,
                  rotate: -45,
                  margin: 15,
                  // lable 距离x轴的距离
                  formatter: (value) => {
                    // lable的换行控制
                    let a = ""
                      if(value.length > 6) {
                        a = value.substring(0,6) + "\n" + value.substring(6,value.length)
                      }else {
                        a = value
                      }
                      return a
                  }
                }
            },
            yAxis: {
              axisLine: {
                show: true,
                lineStyle: {
                  color: "red"
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "red"
                }
              }
            },
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                barWidth: 30,
                itemStyle: {
                  borderRadius: [5,5,0,0],
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        chart.setOption(option);
        window.addEventListener("resize",() => {
          console.log(12121)
          chart.resize()
        })
   }
  },

  mounted() {
   this.chartsFun()
  }
}
</script>

<style>
.home{
  width: 500px;
  height: 500px;
}
</style>
